<template>
    <view class="content">
        <!--顶部搜索按钮区域-->
        <search-top-bar />
        <!--关于我们-->
        <!--     <div class="img-box">
            <div style="background:grey;height:300rpx;"></div>
			<div class="right-pos">
				<div>关于我们<br/><span class="spe">ABOUT US</span></div>
				<div class="next">
					<div class="circle"></div>
					<div class="arrow"><uv-icon name="arrow-right" color="#ffc107" size="14"></uv-icon></div>
					 </div>
			</div>
        </div> -->
        <image
            class="main1"
            src="/static/images/about-us.jpg"
            mode="widthFix"
            fade-show
            lazy-load
			@click="goNext('关于我们')"
        />
        <!--项目发布-->
        <image
            class="main1"
            src="/static/images/xmfb.jpg"
            mode="widthFix"
            fade-show
            lazy-load
			@click="goNext('项目发布')"
        />
        <!--奖项活动-->
        <image
            class="main1"
            src="/static/images/jxhd.jpg"
            mode="widthFix"
            fade-show
            lazy-load
			@click="goNext('奖项活动')"
        />
        <!--优秀服务商-->
        <image
            class="main1"
            src="/static/images/yzfws.png"
            mode="widthFix"
            fade-show
            lazy-load
			@click="goNext('优秀服务商')"
        />
        <!--设计师活动-->
        <image
            class="main1"
            src="/static/images/sjshd.jpg"
            mode="widthFix"
            fade-show
            lazy-load
			@click="goNext('设计师活动')"
        />
        <!--招聘发布-->
        <image
            class="main1"
            src="/static/images/zpfb.jpg"
            mode="widthFix"
            fade-show
            lazy-load
			@click="goNext('招聘发布')"
        />

        <swiper-list :swiperList="swiperDic1" />
    </view>
</template>

<script setup>
	import { getSwiperApi } from "@/api/index.js";
import useShare from "@/utils/composables/useShare";
//import {useTopBarShow} from "@/utils/composables/scroll.js";
import searchTopBar from "@/pages/index/components/searchTopBar.vue";
import swiperList from "@/pages/index/components/swiperList.vue";
//const {topBarShow}= useTopBarShow();
const swiperDic1 = ref([]);
const skipSearch = () => {};
const getSwiperList = () => {
	getSwiperApi({page:'S'}).then((res) => {
	    console.log("设计--获取轮播图列表lists---",res);
		const list=res.data?.length?res.data:[];
		swiperDic1.value = list.filter(v=>v.position=='BOTTOM')?.[0]?.data||[];
	 
	});
};
const goNext = (label) => {
    switch (label) {
		 case "关于我们":
		     uni.navigateTo({
		         url: "../subPackageA/pictureCards/index?type=S1",
		     });
		     break;
		case "项目发布":
		    uni.navigateTo({
		        url: "../subPackageA/pictureCards/index?type=S2",
		    });
		    break;
		case "奖项活动":
		    uni.navigateTo({
		        url: "../subPackageA/pictureCards/index?type=S3",
		    });
		    break;
		case "优秀服务商":
		    uni.navigateTo({
		        url: "../subPackageA/pictureCards/index?type=S4",
		    });
		    break;
        case "设计师活动":
            uni.navigateTo({
                url: "../subPackageA/pictureCards/index?type=S5",
            });
            break;
        case "招聘发布":
            uni.navigateTo({
                url: "../subPackageA/pictureCards/index?type=S6",
            });
            break;
        default:
            break;
    }
};
onPullDownRefresh(() => {
    getSwiperList();
    setTimeout(() => {
        uni.stopPullDownRefresh();
    }, 3000);
});
onLoad((options) => {
    console.log("onLoad----");
    getSwiperList();
});
const {onShareAppMessage,onShareTimeline}=useShare()
</script>

<style lang="scss">
.content {
    box-sizing: border-box;
    background-color: #000;
    //background: #f7f8fa;
    .img-box {
        position: relative;
        .right-pos {
            position: absolute;
            bottom: 60rpx;
            right: 32rpx;
            font-size: 38rpx;
            font-weight: bold;
            color: #fff;
            display: flex;
            text-align: right;
            // align-items: center;
            .spe {
                font-weight: normal;
                font-size: 30rpx;
            }
            .next {
                width: 46rpx;
                height: 46rpx;
                position: relative;
                margin: 6rpx 0 0 20rpx;
                .circle {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    border-radius: 50%;
                    background: #000;
                    opacity: 0.5;
                }
                .arrow {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: #ffc107;
                }
            }
        }
    }
    .main1 {
        display: block;
        margin: 0;
        width: 100%;
        //aspect-ratio:16/9;
    }
}
</style>
